<mat-card class="form-card">
  <mat-card-title *ngIf="groupName">{{'Manage members of' | translate}} {{groupName}} {{'group' | translate}}</mat-card-title>
    <mat-spinner 
      [diameter]='40' 
      id="group-member-spinner"
      *ngIf="showSpinner">
    </mat-spinner> 
  <mat-card-content>
    <div class="padding-16" *ngIf="members.length > 0">
      <app-dual-listbox 
        [items]="members" 
        [(selectedItems)]="selectedMembers" 
        minHeight="65vh"
        maxHeight="65vh" 
        title1="{{'All users' | translate}}"
        title2="{{'Group members' | translate}}">
        <ng-template #templateItem let-item="data">
          <mat-list-item class="pointer">{{item.username}}</mat-list-item>
        </ng-template>
      </app-dual-listbox>
    </div>
  </mat-card-content>
  <mat-card-actions class="button-container">
    <button mat-button color="primary" (click)="updateUsers()">{{ 'Save' | translate }}</button>
    <button mat-button color="accent" (click)="cancel()">{{ 'Cancel' | translate }}</button>
  </mat-card-actions>
</mat-card>
